<template>
    <Modal v-model="show" title="增加" @on-ok="ok" :loading="loading" :scrollable="true" >
        <Form ref="roleForm" :model="roleForm" :rules="roleFormRule">
            <Row>
                <Col span="11">
                    <FormItem label="角色名字" prop="roleName">
                        <Input type="text" :maxlength=50 v-model="roleForm.roleName" placeholder="请输入角色名字">
                        </Input>
                    </FormItem>
                    <FormItem label="角色编码" prop="roleCode">
                        <Input type="text" :maxlength=20 v-model="roleForm.roleCode" placeholder="请输入角色编码">
                        </Input>
                    </FormItem>
                </Col>
                <Col span="2">
                </Col>
                <Col span="11">
                    <Tree :data="roleForm.roleTrees" show-checkbox ref="roleTree"></Tree>
                </Col>
            </Row>
        </Form>
    </Modal>
</template>
<script>
    import {isExit,addRole,getAllTreeAndButtonList} from '../../../api/sys/role/role-api';

    export default {
        name: 'addRole',
        props: {
            value: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                roleForm:{
                    roleName:'',
                    roleCode:'',
                    roleTrees:[]
                },
                roleFormRule:{
                    roleName:[
                        {required: true, message: '请输入角色名字', trigger: 'blur'},
                        {type: 'string', max: 50, message: '角色名字允许输入最大长度为50个字符', trigger: 'blur'}
                    ],
                    roleCode: [
                        {required: true, message: '请输入角色编码.', trigger: 'blur'},
                        {type: 'string', max: 20, message: '字典编码允许输入最大长度为20个字符', trigger: 'blur'},
                        {
                            validator: this.checkRole({
                                tip: '角色编码重复',
                                response: 'exist'
                            }), trigger: 'blur'
                        }
                    ]
                },
                show: this.value,
                loading: true
            };
        },
        watch: {
            value(val) {
                this.show = val;
            },
            show(val) {
                //当重新显示增加数据的时候重置整个form表单
                if(val){
                    this.$refs['roleForm'].resetFields();
                    this.initTree();
                }else{// 反之则关闭页面
                    this.closeModal(val);
                }
            }
        },
        methods:{
            checkRole(json){
                return function (rule, value, callback) {
                    let roleCode = value;
                    isExit({roleCode}).then(res => {
                        if (res.result) {
                            callback();
                        } else {
                            callback(new Error(json.tip ? json.tip : res.msg));
                        }
                    });
                };
            },
            ok() {
                this.$refs['roleForm'].validate((valid) => {
                    if (valid) {
                        addRole(this.roleForm).then(res => {
                            if(res.result){
                                this.$Message.success(res.msg);
                                // 提交表单数据成功则关闭当前的modal框
                                this.closeModal(false);
                                // 同时调用父页面的刷新页面的方法m ru
                                this.$emit('handleSearch');
                            }else{
                                this.$Message.err(res.msg);
                            }
                        });
                    } else {
                        this.$Message.error('表单验证失败，请检查表单!');
                    }
                    setTimeout(() => {
                        this.loading = false;
                        this.$nextTick(() => {
                            this.loading = true;
                        });
                    },1000);
                });
            },
            closeModal(val) {
                this.$emit('input', val);
            },
            initTree(){
                const _this = this;
                getAllTreeAndButtonList({}).then(res => {
                    _this.roleForm.roleTrees = res.entity;
                });
            }
        }
    };
</script>